<template>
  <div>
    <van-nav-bar
      title="搜索中心"
      left-arrow
      @click-left="$router.back()"
    ></van-nav-bar>
    <!-- 1. 搜索区域 输入框 -->
    <van-search
      @input="hInput"
      v-model.trim="keyword"
      show-action
      placeholder="请输入搜索关键词"
    >
      <!-- #action  ==== slot="action" -->
      <!-- <template slot="action">
        <div>搜索</div>
      </template> -->
      <div slot="action">搜索</div>
    </van-search>

    <!-- 2. 搜索建议 -->
    <van-cell-group>
      <van-cell
        v-for="(item, idx) in cSuggestion"
        :key="idx"
        icon="search"
        @click="hClickSuggetion(idx)"
      >
        <div v-html="item"></div>
      </van-cell>
    </van-cell-group>

    <!-- 3. 历史记录 -->
    <van-cell-group>
      <van-cell title="历史记录" />

      <van-cell title="单元格">
        <van-icon name="close"></van-icon>
      </van-cell>

      <van-cell title="单元格">
        <van-icon name="close"></van-icon>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getSuggestion } from '@/api/search.js'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '', // 关键字
      suggestions: [] // 联想建议（在输入框下面的搜索数据）
    }
  },
  computed: {
    cSuggestion () {
      // RegExp 新建了一个正则表达式 g匹配全部 i不区分大小写
      const reg = new RegExp(this.keyword, 'gi')
      // 对原数据suggestions中的每一项都做正则匹配，得到高亮之后的字符串
      return this.suggestions.map(sug => sug.replace(reg, val => '<span style="color:red">' + val + '</span>'))
      // const newArr = this.suggestions.map(sug => {
      //   return sug.replace(reg, val => '<span style="color:red">' + val + '</span>')
      // })

      // return newArr
    }
  },
  methods: {
    async hInput () {
      console.log('关键字', this.keyword)
      // 如果用户没有输入任何内容，则清空建议，不要发请求了
      if (this.keyword === '') {
        this.suggestions = []
        return // 清空后直接返回 不会再请求后台数据
      }
      try {
        const res = await getSuggestion(this.keyword)
        console.log(res)
        this.suggestions = res.data.data.options // 关联到的数据内容在options里
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style>
</style>
